<template>
  <div
    id="chart"
    style="width: 600px; height: 400px; border: 1px solid #000; margin: 0 auto"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Chart",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      //初始化 图表
      const chart = echarts.init(document.getElementById("chart"));

      // 堆叠柱状图
      let xData = ["张明", "陈松", "王皓", "李志"];
      let seriesData = [
        {
          name: "类型Ⅰ",
          value: [4, 6, 8, 4],
        },
        {
          name: "类型II",
          value: [4, 2, 7, 3],
        },
        {
          name: "类型III",
          value: [4, 6, 8, 5],
        },
        {
          name: "类型IV",
          value: [4, 2, 7, 6],
        },
        {
          name: "类型VI",
          value: [4, 6, 8, 2],
        },
        {
          name: "类型VII",
          value: [4, 2, 7, 6],
        },
      ];
      let colorData = [
        "#D599FD",
        "#EA8533",
        "#FAC858",
        "#91CC75",
        "#00FFFF",
        "#93BEFF",
        "#D599FD",
        "#EA8533",
        "#FAC858",
        "#91CC75",
        "#00FFFF",
        "#93BEFF",
      ];
      const option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(225, 225, 225, 0.2)",
          borderWidth: 1,
          borderColor: "#1E749C",
          axisPointer: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          textStyle: {
            color: "rgb(0,0,0)",
            fontSize: 14,
          },
        },
        legend: {
          textStyle: {
            color: "rgb(0,0,0)",
            fontSize: 14,
          },
          itemWidth: 12,
          itemHeight: 12,
          icon: "rect",
          width: 600,
          itemGap: 44,
          padding: [30, 5, 5, 5],
          orient: "horizontal",
          align: "left",
          top: "top",
          left: "center",
          pageTextStyle: {
            color: "#fff",
          },
          pageIconInactiveColor: "rgba(0,0,0, 0.5)",
          pageIconColor: "rgba(0,0,0, 1)",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisLabel: {
              textStyle: {
                fontSize: "14",
                color: "rgba(0, 0, 0, 0.8)",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "rgba(0, 0, 0, 0.8)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 0, 0, 0.8)",
              },
            },
          },
        ],
        yAxis: {
          axisLabel: {
            color: "rgba(0, 0, 0, 0.8)",
            fontSize: 14,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.8)",
              type: "solid",
            },
          },
          nameTextStyle: {
            fontSize: 14,
            color: "rgba(0, 0, 0, 0.8)",
            padding: [0, 0, 15, 20],
          },
          name: "汇报次数（次）",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: seriesData.map((item, index) => {
          return {
            name: item.name,
            type: "bar",
            stack: "排名",
            data: item.value,
            barWidth: 12,
            itemStyle: {
              barBorderWidth: 1,
              borderColor: colorData[index],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: colorData[index],
                },
                {
                  offset: 0,
                  color: "rgba(0, 192, 250, 0)",
                },
              ]),
            },
          };
        }),
      };

      chart.setOption(option);
    },
  },
};
</script>